<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
            <canvas id="canvas1" width="500" height="500"></canvas>
            <script type="text/javascript">
                /*
                    1.获取画布
                    2.获取上下文对象（画笔）
                    3.绘制路径
                    4.填充
                    5.渲染路径，描边 
                 */
            
                var canvas1 = document.querySelector("#canvas1");
                console.log([canvas1]);

                var ctx = canvas1.getContext("2d");
                console.log(ctx);

                ctx.rect(50,50,300,300);

                ctx.fillStyle = "skyblue";
                ctx.fill();

                ctx.lineWidth = 10;
                ctx.strokeStyle = "green";
                ctx.stroke();
            
            
            
            </script>
    </body>
</html>